/**
 * Created by hejg on 2018/5/15.
 */
import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Alert,
    Image,
    ImageBackground
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import HomeModuleFrame from './HomeModuleFrame';
import Style from '../../../../components/Style';
import Tool from "../../../../components/Tool";
import Indicator from '../../../../components/Indicator';
import {withNavigation} from "react-navigation";
const {
    color,fontSize
} = Style;
export default withNavigation(class HomeImportantWork extends Component {
    constructor(props) {
        super(props);
        this.randColors = [Style.color.blue, Style.color.green, Style.color.yellow];
        this.state={
            totalY:'',
            increaNum:'',
            totalT:'',
            percent:'',
            indicator: {visible: true, message: ''},//控制遮罩层,
        }
        this._timer=null;
    }
    componentDidMount() {
        this._startUser();
    }
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        //在生命周期组件将要移除的方法里清除定时器。避免crash
        this._timer && clearInterval(this._timer);
    }
    _startUser(){
        let _this = this;
        this._timer=setInterval(()=>{
            _this._getListInfo();
        },30000);
    }
    _getListInfo(){
        let _this = this;
        let array = new Array();
        _this.setState({
            indicator: {visible: true, message: ''}
        });
        Tool.fetchJson(Tool.appPath.mkst + 'important/homePageImportant', '', function (data) {
            if(data.state){
                _this.setState({
                    totalY:data.info.totalY,
                    totalT:data.info.totalT,
                    increaNum:data.info.increa,
                    percent:data.info.percent,
                    indicator: {visible: false, message: ''},
                });
            }else{
                _this.setState({indicator: {visible: false, message: Style.tip.noData}});
            }
            alert(JSON.stringify(data.info));
        },function (error) {
            _this.setState({indicator: {visible: false, message: Style.tip.noData}});
        },function () {
            _this.setState({indicator: {visible: false, message: Style.tip.noData}});
        });
    }
    _getRadio(value){
        let str=Number(Number(Number(value*100).toFixed(1)));
        return str;
    }
    render() {
        return (
            
               <View>
                   <Text style={styles.textBak}>实时建档数据</Text>
                   <Image source={require('../../../../assets/base/index_1.png')} style={styles.imgBak}/>
                    <View style={styles.moduleFrameView}>
                        <View style={[styles.importantWorkView]}>
                            <TouchableOpacity
                                onPress={() =>this.props.navigation.navigate('ImportWork',{headerTitle:'集团建档跟踪'})}
                                style={[styles.importantWorkLeftChildren,styles.borderStyle]}>
                                <Text style={styles.importantWorkLeftTitle}>当日新增</Text>
                                <Text style={styles.importantWorkLeftAll}>{Tool.numberFormat(this.state.increaNum, 0)}</Text>
                            </TouchableOpacity>
                            <ImportNum title='累计预建档' num={this.state.totalNum}/>
                            <ImportNum title='累计正式建档' num={this.state.totalNum}/>
                            <ImportNum title='累计建档率' num={this.state.totalNum}/>
                        </View>
                        <Indicator isVisible={this.state.indicator.visible} message={this.state.indicator.message}/>

                    </View>
               </View>
            
        );
    }
})
class ImportNum extends  Component{
    render(){
        return(
            <View style={[styles.importantWorkLeftChildren,this.props.title=='累计建档率'?null:styles.borderStyle]}>
                    <Text style={styles.importantWorkLeftTitle}>{this.props.title}</Text>
                    <Text style={styles.importantWorkLeftAll}>{Tool.numberFormat(this.props.num, 0)}</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    textBak:{flexDirection:'column',width:13,position: 'absolute', left: 7, zIndex:9999,fontSize:Style.fontSize.small,color:Style.color.white, top:5,},
    imgBak:{
        position: 'absolute',
        left: 0,
        zIndex:8888,
        top:5,
    },
    borderStyle:{
        borderRightColor:color.gray,borderRightWidth:2,borderStyle:'dashed',height:50
    },
    moduleFrameView: {
        // borderRadius: 5,
        borderWidth: 1,
        borderColor: Style.color.shadow,
        backgroundColor: Style.color.white,
        marginTop: 15,
        flexDirection:'column',
        height:70
    },
    importantWorkView: {
        flexDirection: 'row', justifyContent: 'space-between', margin: 10, 
    },
    importantWorkLeft: {
        flex: 1, justifyContent: 'space-between'
    },
    importantWorkLeftChildren: {
        flexDirection: 'column',
        flex: 1,justifyContent: 'space-between',
        paddingTop:4,
        paddingBottom:4

    },
    importantWorkLeftTitle: {
        fontSize: Style.fontSize.small, color: Style.color.gray,textAlign:'center'
    },
    importantWorkLeftValue: {
        fontSize: Style.fontSize.normal,
        color: Style.color.black,
        textAlign:'center',
        fontWeight: 'bold',
        backgroundColor:Style.color.gray,
        marginLeft:4,
        width:20,
    },
    importantWorkLeftAll: {
        fontSize: Style.fontSize.normal,
        color: Style.color.heightBlue,
        fontWeight: 'bold',
        textAlign:'center'
    },
    importantWorkRight: {
        flex: 1, borderColor: Style.color.lightGray, borderLeftWidth: 1
    },
    importantWorkBottom: {
        paddingHorizontal: 10, paddingVertical: 5,
    },
    workRandView: {
        marginVertical: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: Style.color.lightGray
    },
    workRandIndex: {
        paddingVertical: 4, paddingHorizontal: 10,
        borderTopRightRadius: 15, borderBottomRightRadius: 15
    },
    workRandIndexTitle: {
        color: Style.color.white, fontSize: Style.fontSize.mini
    },
    workRandIndexName: {
        color: Style.color.gray,
        fontSize: Style.fontSize.normal,
        paddingHorizontal: 5,
        paddingVertical: 2
    },
    workRandIndexValue: {
        color: Style.color.black,
        fontSize: Style.fontSize.normal,
        fontWeight: 'bold',
        paddingHorizontal: 5,
        paddingVertical: 2
    }
});